<script>

export default {
    name: "App"
}
</script>

<template>
    <div class="container">
        <nav>
            <!--    exact:精确匹配，值是一个布尔值
                    :exact="true" 与 exact 属性效果相同
                    增加该属性以后（值为true）,可以使用router-link-active样式
                    -->
<!--            <router-link exact to="/">首页</router-link>|-->
            <router-link  to="/">首页</router-link>|
            <router-link to="/goodsList">商品列表</router-link>|
            <router-link to="/newsList">新闻列表</router-link>|
            <router-link to="/my">我的个人中心</router-link>
        </nav>
        <router-view name="One"></router-view>
        <router-view name="Two"></router-view>
        <router-view></router-view>
    </div>
</template>

<style scoped lang="less">
.container{
    text-align: center;
    a{
        margin:10px;
        color:skyblue;
        // router-link-active:非精确匹配时使用的样式  路由设置path是浏览器输入的开头部分属性非精确匹配
                //                    比如浏览器输入的path是 /a
                //                         路由设置的path是 /a------精确匹配
                //                         路由设置的path是 /a/b/c--不匹配
                //                         路由设置的path是 / ------非精确匹配
        //                    比如浏览器输入的path是 /my
        //                          路由设置的path / --------- 非精确匹配
        //                          路由设置的path /my ------- 精确匹配
        //                    比如浏览器输入的path是 /goodsList
        //                          路由设置的path是 /goodsList ---- 精确匹配
        //                          路由设置的path是 / --------------非精确匹配
        //                    比如浏览器输入的path是 /my/a
        //                          路由设置的path是/my/a-----------精确匹配
        //                          路由设置的path是/my-----------非精确匹配

        //                     路由设置的path是 /my，  只要在浏览器中以/my/开头都是非精确匹配。
        //                          浏览器中输入的path是 /my/a---------非精确匹配
        //                          浏览器中输入的path是 /my/b---------非精确匹配
        //                          浏览器中输入的path是 /myal---------不匹配

        //                     路由设置的path是 /，  只要在浏览器中以/开头都是非精确匹配。
        //                          浏览器中输入的path是 /my/a---------非精确匹配
        //                          浏览器中输入的path是 /my/b---------非精确匹配
        //                          浏览器中输入的path是 /myal---------非精确匹配
        // router-link-exact-active：精确匹配使用的样式  浏览器中输入的path与路由设置的path一致

        // 模糊匹配即可使用该样式。如果要精确匹配才可以使用router-link-active，那么需要与exact属性结合使用
        //&.router-link-active{
        //    color:red;
        //}

        // 只有路由地址与浏览器地址完全相同才会使用该样式
        &.router-link-exact-active{
            color:red;
        }
    }
}
</style>